<template>
<div id="main">
  <div class='header'>
    大创园巡检
    <i class="el-icon-back backBtn" @click="backBtn"></i>
  </div>
  <el-row class="searchBox" :gutter="4">
    <el-form :model="form" ref="form" size="mini">
    <el-form-item>
      <el-col :span="12">
        <el-select v-model="form.buildingId" placeholder="请选择所属楼宇"  style="width: 100%;" @change="onSelectBuilding" >
          <el-option v-for="item in buildingData" :key="item.value" :label="item.text" :value="item.value"></el-option>
        </el-select>
      </el-col>
      <el-col :span="12">
        <el-select v-model="form.buildingDetailId" placeholder="请选择所属楼层"  style="width: 100%;" @change="onSelectRoom">
          <el-option v-for="item in buildingDetailData" :key="item.value" :label="item.text" :value="item.value"></el-option>
        </el-select>
      </el-col>
    </el-form-item>
    <el-form-item>
        <el-col :span="12">
          <el-select v-model="form.roomId" placeholder="请选择房间号"  style="width: 100%;">
            <el-option v-for="item in roomData" :key="item.value" :label="item.text" :value="item.value"></el-option>
          </el-select>
        </el-col>
        <el-col :span="12">          
          <el-button @click="resetForm">重置</el-button>
          <el-button  type="primary" @click="getList">查询</el-button>  
        </el-col>
         <!-- <el-col :span="12">
          <el-select v-model="form.planId" placeholder="请选择计划名称"  style="width: 100%;">
            <el-option v-for="item in palnListData" :key="item.value" :label="item.text" :value="item.value"></el-option>
          </el-select>
        </el-col> -->
    </el-form-item>
    <!-- <el-form-item>        
        <el-col :span="12">
          <el-date-picker type="date" placeholder="选择结束时间" 
          v-model="form.endTime" 
          value-format="yyyy-MM-dd"
          style="width: 100%;"></el-date-picker>
        </el-col>
        <el-col :span="12">
          <el-select v-model="form.planId" placeholder="请选择计划名称"  style="width: 100%;">
            <el-option v-for="item in palnListData" :key="item.value" :label="item.text" :value="item.value"></el-option>
          </el-select>
        </el-col>
    </el-form-item> -->
    <el-form-item class="footer">     
      <el-button type="warning" @click="addItem">添加巡检记录</el-button>       
        
    </el-form-item>
    </el-form>
  </el-row>
  <el-table :data="tableData" style="width: 100%" v-loading="loading">
    <el-table-column prop="buildingName" label="楼宇" width="100px"></el-table-column>
    <el-table-column prop="floorName" label="楼层"></el-table-column>
    <el-table-column prop="roomName" label="房间号"></el-table-column>
    <el-table-column prop="createTime" label="巡检时间" width="120px"></el-table-column>
    <el-table-column fixed="right" label="操作" align="center" width="100">
      <template slot-scope="scope">
        <el-button @click="detail(scope.row)" type="text" size="small">查看</el-button>
        <el-divider direction="vertical"></el-divider>
        <el-popconfirm
          confirm-button-text='确定'
          cancel-button-text='取消'
          icon="el-icon-info"
          icon-color="red"
          title="确定删除？"
          @confirm="deleteRow(scope.row)"
        >
          <el-button  type="text" size="small" slot="reference">删除</el-button>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>
  <div class="footer">
    <el-pagination small background layout="prev, pager, next" :total="total"
    @current-change="currentChange"
    ></el-pagination>
  </div>
</div>
</template>

<script>
import {
  Host_Ip2
} from "../../config.js"
import FootMarket from './components/FootMarket.vue'
import { GetBuilding, GetBuildingDetail, GetRoom, getList, delItem, planList  } from '../../api/requestForm.js'
import Verify from '@/components/verifition/Verify'

export default {
  components: {
    FootMarket,
    Verify
  },
  data () {
    return {
      actionUrl: Host_Ip2 + '/dfs/upload',
      form: {
        pageSize: 10,
        pageNum: 1,
        buildingId: '',
        buildingDetailId: '',
        roomId: '',
        beginTime: '',
        endTime: ''
      },
      palnListData: [],
      buildingData: [],
      buildingDetailData: [],
      roomData: [],
      tableData: [
        // {
        //   buildingId: "南区1#楼",
        //   buildingDetailId: "1层",
        //   roomId: "101",
        //   date: '2016-05-02'
        // }, {
        //   buildingId: "南区1#楼",
        //   buildingDetailId: "1层",
        //   roomId: "102",
        //   date: '2016-05-04'
        // }, 
        // {
        //   buildingId: "南区1#楼",
        //   buildingDetailId: "1层",
        //   roomId: "101",
        //   date: '2016-05-02'
        // }, {
        //   buildingId: "南区1#楼",
        //   buildingDetailId: "1层",
        //   roomId: "102",
        //   date: '2016-05-04'
        // }, 
      ],
      loading: false,
      total: 0,
    }
  },
  methods: {  
    backBtn() {
      this.$router.back()
    },  
    // 查看
    detail(row) {
      // console.log(row, 'detail');
      // 页面跳转  
      this.$router.push({ 
        path: '/viewDetail',
        query: {
          id: row.id
        }})
    },
    getPlanList() {
      planList().then(res => {
        console.log(res, 'reeeee')
        if (res.data.code === 0) {
          const result = res.data.rows
          result.forEach(r => {
            this.palnListData.push({ value: r.id, text: r.planName })
          })
        }  
      })
    },
    getList() {
      this.loading = true
      console.log(this.form)
      getList(this.form).then(res => {
        if (res.data.code === 0) {
          this.loading = false
          this.tableData = res.data.rows
          this.total = res.data.total
          console.log(this.tableData)         
        }        
      })
    },
    resetForm() {
      this.form = {
        pageSize: 10,
        pageNum: 1,
      }
    },
    currentChange(e) {
      console.log(e)
      this.form.pageNum = e
      this.getList()
    },
    deleteRow(row) {
      console.log(row.id)
      delItem({ids: row.id}).then(res => {
        console.log(res)
        if(res.data.msg == 'success') {
          this.$message({
            message: '添加成功',
            type: 'success'
          });
          this.getList()
        } else {
          this.$message({
            message: res.data.msg,
            type: 'error'
          });
        }
      })
    },
    addItem() {
      console.log('add');
      // 页面跳转  
      this.$router.push({ 
        path: '/scenicspot',
        query: {
          planId: this.form.planId
        },
        })
    },
    // 选择楼宇列表
    onSelectPark () {
      this.buildingData = []
      this.form.buildingId = ''
      GetBuilding().then(res => {
        if (res.data.code === 0) {
          const result = res.data.data
          result.forEach(r => {
            this.buildingData.push({ value: r.id, text: r.buildingName })
          })
        }        
        // console.log(this.buildingData, res, 'buildingData')
      })
    },
    // 选择楼层
    onSelectBuilding (buildingId) {
      console.log(buildingId, 'buildingId')
      this.buildingDetailData = []
      this.form.buildingDetailId = ''
      this.form.roomId = ''
      if (buildingId) {
        GetBuildingDetail( buildingId ).then(res => {
          if (res.data.code === 0) {
            const result = res.data.data
            result.forEach(r => {
              this.buildingDetailData.push({ value: r.id, text: r.floorName });
            })
          }
        })
      }
      // console.log(this.buildingDetailData)
    },
    // 选择房间
    onSelectRoom (buildingDetailId) {
      // console.log({ buildingId: this.form.buildingId, buildingDetailId, }, '?????')
      this.roomData = []
      this.form.roomId = ''
      if (buildingDetailId) {
        GetRoom({ buildingId: this.form.buildingId, buildingDetailId }).then(res => {
          if (res.data.code === 0) {
            const result = res.data.data
            result.forEach(r => {
              this.roomData.push({ value: r.id, text: r.name });
            })
          }
        })
      }
      // console.log(this.buildingDetailData)
    },
  },
  created() {
    console.log(this.$route.query, 'llll')
    this.form.planId = this.$route.query.id
    this.getList()
    this.onSelectPark()
    // this.getPlanList()
  },
  mounted() {   
  },
  watch: {
    activeTab(newVal, oldVal) {
      // console.log(newVal, oldVal)
      this.form2 = {}
    }
  }
}
</script>

<style >
html,body{
  padding: 0 !important;
  margin: 0 !important;
}

</style>
<style scoped lang="less">
.searchBox {
  background-color: rgb(84, 199, 228);
  .el-form-item {
    margin: 4px !important;
  }
}
.footer {
  margin-top: 6px;
  display: flex;
  justify-content: center;
}
.header {
  padding: 12px;
  background-color: rgb(21, 101, 221);
  text-align: center;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 3px;
}
.backBtn {
  position: absolute;
  left: 10px;
  font-size: 22px;
}
</style>
